<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机震动测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        button {
            padding: 12px 24px;
            margin: 10px;
            font-size: 16px;
            cursor: pointer;
            border: none;
            border-radius: 6px;
            color: white;
            transition: background-color 0.3s;
        }
        #immediateVibrate {
            background-color: #007bff;
        }
        #delayedVibrate {
            background-color: #28a745;
        }
        #immediateVibrate:hover {
            background-color: #0056b3;
        }
        #delayedVibrate:hover {
            background-color: #1e7e34;
        }
        #vibrateStatus {
            margin-top: 20px;
            font-size: 20px;
            font-weight: bold;
            padding: 10px;
            border: 2px solid #ccc;
            min-width: 300px;
            text-align: center;
            background-color: white;
        }
        .success {
            color: green;
            border-color: green;
        }
        .failure {
            color: red;
            border-color: red;
        }
        .info {
            color: #007bff;
            border-color: #007bff;
        }
    </style>
</head>
<body>

    <h1>手机震动接口测试</h1>

    <button id="immediateVibrate">点击立即震动 (500ms)</button>

    <button id="delayedVibrate">点击 2 秒后震动 (300ms)</button>

    <p id="vibrateStatus" class="info">请点击上方按钮进行测试...</p>

    <script>
        const statusElement = document.getElementById('vibrateStatus');
        const immediateButton = document.getElementById('immediateVibrate');
        const delayedButton = document.getElementById('delayedVibrate');
        const VIBRATE_DURATION = 500; // 默认震动时长 500ms
        const DELAY_TIME = 2000;      // 延迟时间 2000ms (2秒)

        /**
         * 尝试调用震动 API 并更新状态文本
         * @param {number} duration 震动持续时间（毫秒）
         * @returns {boolean} 震动请求是否成功
         */
        function tryVibrate(duration) {
            // 1. 检查 API 是否存在
            if (!('vibrate' in navigator)) {
                updateStatus('失败：当前浏览器/设备不支持震动 API。', 'failure');
                return false;
            }

            // 2. 调用震动 API
            const success = navigator.vibrate(duration);

            // 3. 检查 API 返回值和设备支持
            if (success) {
                updateStatus(`成功：设备震动 ${duration} 毫秒。`, 'success');
                return true;
            } else {
                // 在 Android/Chrome 等浏览器上，如果设备不支持震动硬件，会返回 false
                // 在 iOS 上，接口始终被禁用，即使返回 true 也可能无效。
                updateStatus('失败：设备不支持震动或权限受限。', 'failure');
                return false;
            }
        }

        /**
         * 更新状态提示文本的样式和内容
         * @param {string} message 要显示的文本
         * @param {string} type 状态类型 ('success', 'failure', 'info')
         */
        function updateStatus(message, type) {
            statusElement.textContent = message;
            statusElement.className = ''; // 清除旧样式
            statusElement.classList.add(type);
        }

        // --- 按钮 1 绑定事件：立即震动 ---
        immediateButton.addEventListener('click', function() {
            updateStatus('正在尝试立即震动...', 'info');
            tryVibrate(VIBRATE_DURATION);
        });

        // --- 按钮 2 绑定事件：延迟震动 ---
        delayedButton.addEventListener('click', function() {
            updateStatus(`已点击，将在 ${DELAY_TIME / 1000} 秒后尝试震动...`, 'info');

            // 注意：延迟调用不受“用户操作”限制的影响，但如果浏览器在延迟期间
            // 将页面置于后台（例如用户切换应用），震动仍可能被阻止。
            setTimeout(function() {
                updateStatus('延迟结束，正在尝试震动...', 'info');
                // 这里使用较短的震动，以便和立即震动区分开
                tryVibrate(300); 
            }, DELAY_TIME);
        });

        // 页面加载时的提示
        window.onload = function() {
            if (!('vibrate' in navigator)) {
                 updateStatus('注意：当前浏览器可能不支持震动 API。', 'failure');
            }
        };
    </script>
</body>
</html>